﻿@model IEnumerable<DHQGHN.PM2.Models.EnumeratorModel>
@{
    int recordCount = 0;
    if (Model.Count<DHQGHN.PM2.Models.EnumeratorModel>() > 0)
    {
        recordCount = Model.ElementAt<DHQGHN.PM2.Models.EnumeratorModel>(0).RECORD_COUNT;
    }

    var grid = new WebGrid(Model, canPage: true,
        selectionFieldName: "selectedRow");
    long start_Record = Model.Count<DHQGHN.PM2.Models.EnumeratorModel>() > 0 ? Model.First().ORDER : 0;
    long end_Record = Model.Count<DHQGHN.PM2.Models.EnumeratorModel>() > 0 ? Model.Last().ORDER : 0; 
}

<script>
    var recordCount = '@recordCount';
    var startRecord = '@start_Record';
    var endRecord = '@end_Record';
</script>

@Html.Hidden("RECORD_COUNT", @recordCount)
@grid.GetHtml(tableStyle: "webGrid table table-striped table-bordered table-hover dataTable no-footer",
headerStyle: "header", htmlAttributes: new { id = "EnumGrid" },
            fillEmptyRows: false,
            alternatingRowStyle: "", selectedRowStyle: "select",
                rowStyle: "webgrid-row-style",

            columns: grid.Columns(
                          grid.Column(
                            columnName: "STT",
                            header: "STT",
                            format: @<text>
                                <span>
                                    @item.ORDER
                                </span>
                            </text>,
                            canSort: false,
                            style: "clsSTT"
                          ),
                          grid.Column(
                            columnName:"FullName",
                            header: "Họ tên",
                            format: @<text>
                                <div id="spnFullName" class="hidden-580">@item.FULL_NAME</div>
                                <div class="display-580"><b>@item.FULL_NAME</b></div>
                                <span class="display-480">Tài khoản: @item.USERNAME</span>
                                <span class="display-580">Nhóm: @item.GROUPCODE</span>
                            </text>, canSort: false
                          ),
                          grid.Column(
                            columnName:"UserName",
                            header: "Tên đăng nhập",
                            format: @<text>
                                <span id="spnUserName" class="display-mode">
                                    @item.USERNAME
                                </span>
                            </text>, canSort: false, style: "clsUserName hidden-480"
                          ),
                          grid.Column(
                            columnName:"GroupCode",
                            header: "Nhóm",
                            format: @<text>
                                <span id="spnGroupCode" class="display-mode">
                                    @item.GROUPCODE
                                </span>
                            </text>, canSort: false, style: "hidden-580"
                          ),
                          grid.Column(
                            columnName:"Description",
                            header: "Mô tả",
                            format: @<text>
                                <span id="spnGroupCode" class="display-mode">
                                    <span id="spnDescriptions" class="display-mode" style=" border: none; background-color: transparent;">@item.DESCRIPTIONS</span>
                                </span>
                            </text>, canSort: false, style: "hidden-780 autohidden"
                          ),
                          grid.Column(
                            columnName: "Action",
                            header: "Thao tác",
                            format: @<text>
                                <div style="text-align:center;">
                                    <div class="btn-group">
                                        <a href="#" data-toggle="dropdown" class="btn btn-lg" style="margin:0px; padding:0px;">
                                            <div class="label label-info">
                                                <i class="fa fa-th"></i>
                                            </div>
                                        </a>
                                        <ul class="dropdown-menu no-angle pull-right right">
                                            <li>
                                                <a onclick="onEdit('@item.ENUMERATOR_ID')" data-index="@item.ENUMERATOR_ID" style="cursor:pointer;"> <i class="fa fa-pencil"></i> Cập nhật thông tin</a>
                                            </li>
                                            <li>
                                                <a onclick="onDelete('@item.ENUMERATOR_ID')" data-index="@item.ENUMERATOR_ID" style="cursor:pointer;"> <i class="fa fa-trash-o"></i> Xóa thông tin</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </text>, canSort: false, style: "action"
                                                        )
                                              )
                                        )


<script type="text/javascript">
    $(function () {
        $('.clsSTT').css('text-align', 'center');
        var colsHeader = $('#gridContent th');
        $(colsHeader[2]).addClass('hidden-480');
        $(colsHeader[3]).addClass('hidden-580');
        $(colsHeader[4]).addClass('hidden-780');
        $(colsHeader[5]).css('text-align', 'center').css('width', '50px');
    });
</script>
